<template>
	<el-dialog title="修改密码" top="25vh" @close="close" :visible.sync="visible" width="560px" center>
		<div class="dialog-content">
			<div class="form-item">
				<p class="form-item-title">原密码：</p>
				<div class="form-item-content flex flex-align-center">
					<el-input type="password" style="width: 300px;" @blur="checkOldpwd" maxlength="16" v-model="form.oldpwd" placeholder="请输入新密码"></el-input>
					<img :src="successIcon" v-if="oldPwdState" class="success-icon" alt="" />
				</div>
			</div>
			<div class="form-item" style="margin-bottom: 16px;">
				<p class="form-item-title">新密码：</p>
				<div class="form-item-content">
					<div class="flex flex-align-center">
						<el-input type="password" style="width: 300px;" @blur="checkNewpwd1" maxlength="16" v-model="form.newpwd1" placeholder="请输入新密码"></el-input>
						<img :src="successIcon" v-if="newPwd1State" class="success-icon" alt="" />
					</div>
					<p class="pwd-tip">密码请至少包含数字、字母或者特殊符号，共至少8位，最长不超过16位</p>
				</div>
			</div>
			<div class="form-item">
				<p class="form-item-title">确认密码：</p>
				<div class="form-item-content flex flex-align-center">
					<el-input type="password" style="width: 300px;" @blur="checkNewpwd2" maxlength="16" v-model="form.newpwd2" placeholder="请再次输入新密码"></el-input>
					<img :src="successIcon" v-if="newPwd2State" class="success-icon" alt="" />
				</div>
			</div>
			<div class="form-item">
				<p class="form-item-title">渠道管理员手机号：</p>
				<div class="form-item-content flex flex-align-center">
					<el-input maxlength="11" style="width: 300px;" @blur="checkPhone" v-model="form.phone" placeholder="请输入管理员手机号"></el-input>
					<img :src="successIcon" v-if="phoneState" class="success-icon" alt="" />
				</div>
			</div>
			<div class="form-item">
				<p class="form-item-title">短信验证码：</p>
				<div class="form-item-content clear" style="width: 300px;">
					<el-input class="left" maxlength="6" v-model="form.smscode" style="width:160px;" placeholder="请输入短信验证码"></el-input>
					<el-button class="right" :disabled="!sendCodeStatus" style="width:120px;font-size: 12px;" :type="sendCodeStatus?'primary':'default'" @click="sendCode">{{btnText}}</el-button>
				</div>
			</div>
		</div>

		<span slot="footer" class="dialog-footer">
			<el-button type="primary" plain @click="close">取 消</el-button>
			<el-button type="primary" @click="confirmChange">确 认</el-button>
		  </span>
	</el-dialog>

</template>

<script>
	import { getCookie,phoneReg} from '@/utils/common'
	import successIcon from '@/assets/images/home/success_icon.png'
	var regLetter = /[A-Za-z]/;
	var regNum = /[0-9]/;
	var regTeShu =new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？+-]");
	export default {
		name: 'EditPassword',//卡券弹窗
		props: ['show'],
		watch:{
			show(){
				this.visible=this.show
				if(this.show){
					this.form={
						phone:this.form.phone,
						oldpwd:'',
						newpwd1:'',
						newpwd2:'',
						smscode:'',
					}
				}
			}
		},
		data() {
			return {
				successIcon,
				
				visible:false,
				oldPwdState:false,
				newPwd1State:false,
				newPwd2State:false,
				phoneState:false,
				sendCodeStatus:true,
				btnText:'获取验证码',
				timer:null,
				form:{
					phone:'',
					oldpwd:'',
					newpwd1:'',
					newpwd2:'',
					smscode:'',
				},
			}
		},
		mounted() {
			this.form.phone=this.$store.state.user.phone
		},
		methods: {
			checkOldpwd(){
				this.oldPwdState=this.checkPwd(this.form.oldpwd)
				console.log(this.oldPwdState)
			},
			checkNewpwd1(){
				this.newPwd1State=false
				
				if(this.checkPwd(this.form.newpwd1)){
					this.newPwd1State=true
				}
			},
			checkNewpwd2(){
				this.newPwd2State=false
				if(this.checkPwd(this.form.newpwd2)&&this.form.newpwd2==this.form.newpwd1){
					this.newPwd2State=true
				}
			},
			checkPhone(){
				this.phoneState=phoneReg.test(this.form.phone)
			},
			checkPwd(password){
				var complex = 0;
				if (regLetter.test(password)){
					++complex;
				}
				if (regNum.test(password)){
				    ++complex;
				}
				if (regTeShu.test(password)){
					++complex;
				}
				if (complex < 3 || password.length < 8||password.length >16) {
					return false;
				}
				return true
			},
			sendCode(){
				if(!this.form.phone){
					this.msgError('请输入渠道管理员手机号')
					return
				}
				
				if(!phoneReg.test(this.form.phone)){
					this.msgError('渠道管理员手机号格式错误')
					return
				}
				if(this.sendCodeStatus){
					this.$request.sendSmsCode({
						phone:this.form.phone
					}).then(res=>{
						if(res.code==0){
							this.sendCodeStatus=false
							var lastSeconds=60
							this.btnText='('+lastSeconds+'s)后可再次获取'
							this.timer=setInterval(()=>{
								lastSeconds--
								if(lastSeconds==0){
									clearInterval(this.timer)
									this.btnText='获取验证码'
									this.sendCodeStatus=true
									return
								}
								this.btnText='('+lastSeconds+'s)后可再次获取'
							},1000)
						}else{
							this.msgError(res.msg)
						}
					})
				}
			},
			confirmChange() {
				if(!this.form.oldpwd){
					this.msgError('请输入旧密码')
					return
				}

				if(!this.form.newpwd1){
					this.msgError('请输入新密码')
					return
				}
				if(this.form.newpwd1==this.form.oldpwd){
					this.msgError('新密码不可与旧密码相同')
					return
				}
				if(!this.form.newpwd2){
					this.msgError('请再次输入新密码')
					return
				}
				if(this.form.newpwd2!=this.form.newpwd2){
					this.msgError('两次输入的密码不一致')
					return
				}
				if(!this.form.phone){
					this.msgError('请输入管理员手机号')
					return
				}
				if(!phoneReg.test(this.form.phone)){
					this.msgError('管理员手机号格式错误')
					return
				}
				if(!this.form.smscode){
					this.msgError('请输入短信验证码')
					return
				}
				this.network=true
				this.$request.checkPassword(this.form)
				.then(res=>{
					if(res.code==0){
						this.$request.savePassword(this.form)
						.then(res2=>{
							if(res2.code==0){
								this.msgSuccess('修改成功')
								this.$emit('closeEditPwd')
							}
							else{
								this.msgError(res.msg)
							}
						})
					}
					else{
						this.msgError(res.msg)
					}
				})
				
			},
			close() {
				this.$emit('closeEditPwd')
			}
		}
	}
</script>

<style scoped lang="scss">
	>>>.el-dialog__body {
		padding: 20px 16px;
		border-top: 1px solid #eee;
		border-bottom: 1px solid #eee;
		.dialog-content {
			padding: 0 10px;
			.form-item{
				display: block;
				margin-bottom: 16px;
				&:last-child{
					margin-bottom: 0;
				}
			}
			.form-item-title{
				width: 140px;
			}
			.form-item-content{
				width: 340px;
				.success-icon{
					width: 20px;
					height: 20px;
					margin-left: 12px;
				}
				.pwd-tip{
					width: 300px;
					color: red;
					font-size: 14px;
					line-height: 18px;
					margin-top: 12px;
				}
			}
			.no-data {
				text-align: center;
				font-size: 16px;
				margin-top: 90px;
				color: #333;
			}
		}
	}
</style>